<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN-->
    <!-- <my-navbar :height="100" :background="'#ffffff'" leftText="更改密码" @leftClick="back"></my-navbar> -->
    <!-- #endif -->
    <hx-navbar ref="hxnb" :config="config" @clickBtn="Btn" />

    <view class="content">
      <view class="content-box">
        <span class="content-box-title">旧密码</span>
        <u-input
          class="content-box-input"
          v-model="form.old"
          :border="formConfiguration.border"
          :height="formConfiguration.height"
          type="password"
          clearable
          placeholder="请输入旧密码"
        />
        <span class="content-box-title">新密码</span>
        <u-input
          class="content-box-input"
          v-model="form.isnew"
          :border="formConfiguration.border"
          :height="formConfiguration.height"
          type="password"
          clearable
          placeholder="请输入6位以上的密码"
        />
        <span class="content-box-title">确认新密码</span>
        <u-input
          class="content-box-input"
          v-model="form.renew"
          :border="formConfiguration.border"
          :height="formConfiguration.height"
          type="password"
          clearable
          placeholder="请输入确认新密码"
        />
        <view class="tips" v-if="showTips">两次密码不一致</view>
      </view>
    </view>

    <!-- <view class="edit">
      <view class="row">
        <view class="prop">旧密码</view>
        <input
          type="password"
          :value="old"
          @input="inputAction($event, 'old')"
          placeholder="请输入旧密码"
        />
      </view>
      <view class="row">
        <view class="prop">新密码</view>
        <input
          type="password"
          :value="isnew"
          @input="inputAction($event, 'isnew')"
          placeholder="请输入六位及以上的密码"
        />
      </view>
      <view class="row">
        <view class="prop">确认新密码</view>
        <input
          type="password"
          :value="renew"
          @keyup="renew = renew.replace(/\s+/g, '')"
          @input="inputAction($event, 'renew')"
          placeholder="请重复密码"
        />
      </view>
    </view> -->
    <view class="submit flex-center" @click="submit">保存</view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      config: {
        title: "更改密码",
        color: "#333333",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#ffffff", "#ffffff"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [0, ["#ffffff", "#ffffff"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
      },
      old: "",
      isnew: "",
      renew: "",
      showTips: false,

      form: {
        old: null,
        isnew: null,
        renew: null,
      },
      formConfiguration: {
        height: 100,
        border: true,
      },
    };
  },
  onReady() {
    getApp().setTitle();
  },
  onLoad(options) {},
  methods: {
    inputAction(e, name) {
      this[name] = e.detail.value;
    },
    submit() {
      if (this.isnew == this.renew) {
        this.showTips = false;
        let option = {
          old_pwd: this.form.old,
          new_pwd: this.form.isnew,
        };
        $https("POST", "changePassword", option, (res) => {
          if (res.data.errcode == 0) {
            uni.showToast({
              title: "修改成功!请重新登录",
              icon: "none",
              success() {
                uni.removeStorageSync("copartner_token");
                setTimeout(function () {
                  uni.navigateTo({
                    url: "/pages/account/login",
                  });
                }, 2000);
              },
            });
          } else {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          }
        });
      } else {
        //两次密码不一致
        this.showTips = true;
      }
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;

  .content {
    width: 100%;
    padding: 0 30rpx;
    margin-top: 20rpx;
    &-box {
      width: 100%;
      padding: 35rpx;
      background: #fff;
      border-radius: 20rpx;
      &-title {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      &-input {
        margin-top: 20rpx;
        margin-bottom: 20rpx;
      }
    }
  }

  .edit {
    padding: 20rpx 40rpx;
    color: #191919;
    .row {
      padding: 22rpx 0 0;
      border-bottom: 2px solid #ececec;
      .prop {
        font-size: $font_4;
        font-weight: 600;
      }
      input {
        font-size: $font_4;
        margin-top: 24rpx;
        padding-left: 8rpx;
      }
    }
  }
  .submit {
    width: 566rpx;
    height: 88rpx;
    background: #40ae36;
    box-shadow: 0px 2rpx 14rpx 2rpx rgba(0, 0, 0, 0.2);
    border-radius: 48rpx;
    margin: 60rpx auto;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
  }
  .tips {
    color: #e84b4b;
    font-size: 26rpx;
  }
}

/deep/.hx_font_size {
  font-weight: bold;
}

/deep/ .u-input__input {
  min-height: 80rpx !important ;
}
</style>
